<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>05-07</title>
  <style>
    .score { border:solid 1px black; }
    .warning { background-color: orange; color:purple; }
    .warnimage { width:18px; height:18px; top:5px; position:relative;   }
  </style>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    <div>
        <p>1부터 100까지만 입력가능합니다.</p>
        <div>
            점수 : <input type="text" class="score" 
                v-model.number="score" v-bind:class="info" />
            <img src="images/error.png" class="warnimage" v-show="info.warning" />
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
  el : "#example",
  data : { 
    score : 0
  },
  computed : {
    info : function() {
        if (this.score >= 1 && this.score <= 100) 
            return { warning:false };
        else 
            return { warning:true };
    }
  }
})
</script>
</body>
</html>